class MyPage extends BaseList {
    constructor(orderby, flag, $pagesize, $pagination, listUrl, onLineEditUrl, checkBoxName) {
        super(orderby, flag, $pagesize, $pagination, listUrl, onLineEditUrl, checkBoxName);
    }
    OnPageLoad() {
        if (parseInt(this.flag) === 0) {
            // 如果是单选情况，那么隐藏【确定】按钮
            $("#ButOk").remove();
        }
        if (parseInt(this.flag) === 1) {
            // 设置全选框
            let html = '<label class="btn" for="CheckAll" style="margin-left:7px;"><input id="CheckAll" type="checkbox" onclick="_Instance.DoCheckAll($(this));" /><i></i><span></span></label>';
            $("#th-checkall").text('');
            $(html).appendTo($("#th-checkall"));
        }
        this.pagination.attr("_msh_page", 1);
        this.FetchForPage(1);
    }
    GetFilter(pageIndex) {
        let item = super.GetFilter(pageIndex);

        item['Begin'] = $.trim($('#Begin').val()) === '' ? null : $.trim($('#Begin').val());
        item['End'] = $.trim($('#End').val()) === '' ? null : $.trim($('#End').val());
        item['StyleNo'] = $.trim($('#StyleNoFilterValue').val()) === '' ? null : $.trim($('#StyleNoFilterValue').val());
        item['CurrentHeaderId'] = parseInt(parent.$("#HeaderId").val());   // 用于排除当前预测表，避免引用自身
       
        return JSON.stringify(item);
    }
    FetchByFilter() {
        this.filterCatalogueFlag = 0;
        this.FetchForPage(1);
    }
    FetchAll() {
        $("#Begin").val("");
        $("#End").val("");
        $("#StyleNoFilterValue").val("");
       
        this.pagination.attr("_msh_page", 1);
        this.FetchForPage(1);
    }
    EmptyTableContent() {
        $("#tabData01 tbody").empty();
        $("#tabData02 tbody").empty();
        this.pagination.attr("_msh_page", 1);
    }
    SetTableContent(result) {
        $("#tabData01 tbody").empty();
        $("#tabData02 tbody").empty();

        let content_01 = '';
        let content_02 = '';
        this.numCheckbox = result.length;  // 设置表格中checkbox的数量为表格的行数
        for (let i = 0; i < result.length; i++) {
            let _headerId = result[i].headerId;
            content_01 = '<tr _mash_id="' + _headerId + '">';
            if (parseInt(this.flag) === 0) { // 单选
                content_01 += '<td style="padding-left:8px; padding-top:0px; vertical-align:baseline;"><label class="btn" for="R-' + _headerId + '"><input id="R-' + _headerId + '" name="_check_row" type="radio" onclick="_Instance.OnChoice($(this));" value="' + _headerId + '"/><i></i><span></span></label></td>';
            } else { // 多选
                content_01 += '<td style="padding-left:9px;"><label class="btn" for="R-' + _headerId + '"><input id="R-' + _headerId + '" name="_check_row" type="checkbox" onclick="_Instance.DoCheckRow($(this),$(\'#CheckAll\'));" value="' + _headerId + '"/><i></i><span></span></label></td>';
            }
            content_01 += '<td>' + formatNullData(result[i].billNo) + '</td>';
            content_01 += '<td>' + formatNullData(result[i].styleNo) + '</td>';            
            // 有审核人则是审核中的状态，否则未审核状态
            if (result[i].checkedBy === null) {
                content_01 += '<td style="text-align:center;"><span class="c2"></span></td>';
            } else {
                if (parseInt(result[i].checkedStatus) === 1) {
                    // 最终审核
                    content_01 += '<td style="text-align:center;"><span class="c1"><span></td>';
                } else {
                    content_01 += '<td style="text-align:center;"><span class="c3"></span></td>';
                }
            }
   
            if (result[i].lastFlag===true) {
                content_01 += '<td style="text-align:center;"><span class="c1"><span></td>';
            }else {
                content_01 += '<td style="text-align:center;"><span class="c2"></span></td>'; 
            }
            content_01 += '</tr>';

            content_02 = '<tr _mash_id="' + _headerId + '">';
            content_02 += '<td>' + formatNullData(result[i].productName) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].customerName) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].perColourQuantity) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].totalQuantity) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].totalUnitCost2Amount) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].updatedByName) + '</td>';    // 操作员
            content_02 += '<td>' + formatNullData(result[i].updatedDate) + '</td>';      // 操作日期
            content_02 += '<td>' + formatNullData(result[i].saledByName) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].checkedByName) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].checkedDate) + '</td>';           
            content_02 += '<td style="border-right: none;">' + formatNullData(result[i].description) + '</td>';
            content_02 += '</tr>';

            $("#tabData01 tbody").append(content_01);
            $("#tabData02 tbody").append(content_02);
            content_01 = '';
            content_02 = '';
        }
        setTwoTableRowColor("tabData01", "tabData02");

        this.ResetSelectRowStatus();  // 恢复选定结果
    }
    // 设置行选择后的状态
    SetRowStatus($self) {
        super.AdjustRowStatus($self, ($row, index) => {
            let key = $self.val();
            let item = {};
            $('#tabData02 tbody tr:eq(' + index + ')').addClass("row__selected");
            // 为翻页选择做准备
            item["HeaderId"] = key;
            item["StyleNo"] = $.trim($row.find('td').eq(1).text());
            this.selectedItemList[key] = item;
        }, ($row, index) => {
            let key = $self.val();
            $('#tabData02 tbody tr:eq(' + index + ')').removeClass("row__selected");
            delete this.selectedItemList[key];
        });
    }
    // 每次翻页都恢复选定结果
    ResetSelectRowStatus() {
        let _this = this;
        $("#tabData01 tbody").find("tr").each(function (index) {
            let key = $(this).attr("_mash_id");
            if (_this.selectedItemList[key] !== undefined) {
                $(this).children("td").eq(0).children("label").eq(0).children("input[type='checkbox'][name='_check_row']").eq(0).prop('checked', true);
                $(this).addClass("row__selected");
                $('#tabData02 tbody tr:eq(' + index + ')').addClass("row__selected");
            }
        });
        // 设置选择全部的状态
        let n = $("input[type='checkbox'][name='_check_row']:checked").length;
        if (n < $("#tabData01 tbody").find("tr").length || n === 0) {
            $("#CheckAll").prop("checked", false);
        } else {
            $("#CheckAll").prop("checked", true);
        }
    }
    // 选择后执行的动作
    SetChoiceData($self) {
        let $row = $self.parent().parent().parent();
        let $str2= $("#tabData02 tbody").find("tr").eq($row.index);
        let _styleNo = $.trim($row.find('td').eq(3).text());     // 款号
        let _productName = $.trim($str2.find('td').eq(0).text());   // 品名        
        let _customerName = $.trim($str2.find('td').eq(1).text());  // 客户名称

        //let $str2 = $("#divD2 table tbody").find("tr").eq($row.index());
        //let _attn = $.trim($str2.find('td').eq(3).text());    // 联系人
        //let _fax = $.trim($str2.find('td').eq(6).text());     // 传真

        // 设置选择结果
        return new Array($self.val(), _styleNo, _productName, _customerName);
    }
    Expand() {
        let _w = $(window).width();
        let wLeftList = 586;
        $("#btnPanel_01").show();
        $("#treeArea").show();
        $("#panelSplitter").css({left: 250});
        $("#panelSplitter").children().removeClass("fa-angle-double-right").addClass("fa-angle-double-left");
        $("#panelSplitter").attr("title", "折叠目录");

        $("#btnPanel_02").css({left: 275});
        $("#grid__wrapper").css({left: 275, width: _w - 8 - 275});
        $("#divH2").css({left: 0, width: _w - 8 - 275 - wLeftList});
        $("#divD2").css({left: -1, width: _w - 8 - 274 - wLeftList});
    }
    Collapse() {
        let _w = $(window).width();
        let wLeftList = 586;
        $("#btnPanel_01").hide();
        $("#treeArea").hide();
        $("#panelSplitter").css({left: 0});
        $("#panelSplitter").children().removeClass("fa-angle-double-left").addClass("fa-angle-double-right");
        $("#panelSplitter").attr("title", "展开目录");

        $("#btnPanel_02").css({left: 24});
        $("#grid__wrapper").css({width: _w - 24 - 8, left: 24});
        $("#divH2").css({left: 0, width: _w - 8 - 24 - wLeftList});
        $("#divD2").css({left: -1, width: _w - 8 - 23 - wLeftList});
    }
    ScrollTo() {
        $('#divH2').scrollLeft($('#divD2').scrollLeft());
        $('#divD1').scrollTop($('#divD2').scrollTop());
    }
}

class MyPageTree extends BaseTree {
    constructor(instance, getTreeUrl, dragUrl, stateKey) {
        super(instance, getTreeUrl, dragUrl, stateKey);
        this.isChoice = 1;
    }
}

let _Instance = null;

//-----------------------------------------------------------------------------
// 页面初始化
//-----------------------------------------------------------------------------
function onPageReady() {
    let flag = jQuery.url.param("flag") === undefined ? 0 : jQuery.url.param("flag");
    _Instance = new MyPage(null, flag, null, $("abbr.page_indicator_block,#wrapper__navbar"),
            "/tech/cost_forecast/fetchForPage.html", null, "_check_row");
   

    // 设置分页控制 （操作区域）
    $("#wrapper__navbar").swPagination({
        link_string: '/?page={page_number}',
        max_page: null,
        paged: function (page) {
            $("abbr.page_indicator_block,#wrapper__navbar").attr("_msh_page", page);
            _Instance.FetchForPage(page);
        }
    });

    $("#panelSplitter").click(function () {
        if ($(this).children("i").hasClass("fa-angle-double-left")) {
            _Instance.Collapse();
        } else {
            _Instance.Expand();
        }
    });

    _Instance.OnPageLoad();
}

// 画面大小或者位置移动
function onPageResize() {
    let h = $(window).height();
    let w = $(window).width();        // 固定宽度
    let wLeftList = 516;              // 左边列表固定宽度
   
    if ($("#panelSplitter").children().hasClass("fa-angle-double-left") === true) {
        $("#divH2").css({left: 0, width: w - 8 - 275 - wLeftList});
        $("#divD2").css({left: -1, width: w - 8 - 274 - wLeftList});
    } else {
        $("#divH2").css({left: 0, width: w - 8 - 24 - wLeftList});
        $("#divD2").css({left: -1, width: w - 8 - 23 - wLeftList});
    }
}